﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<script src="http://localhost/web/shared/lib.js"></script>
	<script>
		document.getScroll = function () {
			if (window.pageYOffset != undefined) {
				return [pageXOffset, pageYOffset];
			}
			else {
				var sx, sy, d = document, r = d.documentElement, b = d.body;
				sx = r.scrollLeft || b.scrollLeft || 0;
				sy = r.scrollTop || b.scrollTop || 0;
				return [sx, sy];
			}
		}
		document.onscroll = function () {
			if (window.pageYOffset >= 100) {
				el(".m1").style["position"] = "fixed";
				el(".m1").style["top"] = "0";
			} else {
				el(".m1").style["position"] = "absolute";
				el(".m1").style["top"] = "100px";
			}
		}
		function refreshM2(id) {
			if (window.pageYOffset >= 100) {
				el("#" + id).style["position"] = "fixed";
				el("#" + id).style["top"] = "0";
			} else {
				el("#" + id).style["position"] = "absolute";
				el("#" + id).style["top"] = "100px";
			}
		}
	</script>
	<style>
		body {
			margin:0;
		}
		/*body>div{
		 position:absolute;
	 }*/
		.top {
			width: 100%;
			height: 100px;
		}

		.m1 {
			top:100px;
			bottom:0;
			position:absolute;
			width: 100px;
		}
		.m2 {
			top:100px;
			bottom:0;
			left:100px;
			position: fixed;
			height:100%;
			width:100px;
		}
		div {
			border:black 1px solid;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="m1"></div>
	<div class="m2"></div>
	<div class="cen">
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
		<p>a</p>
	</div>
</body>
</html>
